<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
	.tab {
	width: 300px;
	height: 300px;
	margin: 100px auto;
}

.tab input {
	background: palegreen;
	border: none;
	margin-bottom: 10px;
}

.tab .active {
	background: yellow;
}

.tab div {
	width: 200px;
	height: 200px;
	border: 1px solid red;
	display: none;
}
	</style>
	<body>
		<div class="tab" id="tab">
    <input class="active" type="button" value="第一天" />
    <input type="button" value="第二天" />
    <input type="button" value="第三天" />
    <div style="display:block;">内容一</div>
    <div>内容二</div>
    <div>内容三</div>
</div>
		<script>//构造函数模式 
//小明 今年18岁 性别男 有男朋友 男朋友会说话 说什么自己定
 function Xiaoming(name,age,sex,boyfriend){
 		this.name=name;
        this.age=age;
        this.sex=sex;
        this.boyfriend = boyfriend;
        this.boyfriendSay = function(){
            alert("我叫"+this.name+"，今年"+this.age+"，性别："+this.sex+"，我"+this.boyfriend+"，我想说我真帅")
        }
    }
    var obj=new Xiaoming("小明","18","男","有男朋友");
    obj.boyfriendSay();
//工厂模式
//造一辆车 出厂 （合格证/建议零售价/说明书）
function cart(certificate,price,ins){
        var car=new Object();
        car.certificate=certificate;
        car.price=price;
        car.ins=ins;
        car.show=function(){
            return this.certificate+this.price+this.ins
        }
        return car;
    }
    var car1=cart("合格证","30万","奔驰");
    var car2=cart("合格证","50万","大众");
    alert(car1.show())
    alert(car2.show())
//面向对象选项卡
window.onload = function() {
	var oTab = new Tabs("tab");
}
function Tabs(id) {
	var oDiv = document.getElementById(id);
	this.aBtn = oDiv.getElementsByTagName('input');
	this.aDiv = oDiv.getElementsByTagName('div');
	var i = 0;
	var _this = this; 
	for(i = 0; i < this.aBtn.length; i++) {
		this.aBtn[i].index = i;
		this.aBtn[i].onclick = function() {
			_this.tab(this); 
		};
	}
};
Tabs.prototype.tab = function(oBtn) {
	for(i = 0; i < this.aBtn.length; i++) {
		this.aBtn[i].className = '';
		this.aDiv[i].style.display = 'none';
	}
	oBtn.className = 'active'; 
	this.aDiv[oBtn.index].style.display = 'block';
}</script>
	</body>
</html>
